import { useNavigate, useLocation } from "react-router-dom";
import { Menu } from "antd";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";


const MenuList = () => {
  const { menuList } = useSelector((state) => state.menu);
  let items = menuList
  if (items.length === 0) {
    items = JSON.parse(localStorage.getItem("menuList"))
  }
  const location = useLocation();
  const navigate = useNavigate();
  const [defaultItem, setdefaultItem] = useState(["/"]);
  useEffect(() => {
    let newArr = [];
    newArr[0] = location.pathname;
    setdefaultItem(newArr);
  }, [location.pathname]);
  const goTo = (key) => {
    navigate(key.key);
  };
  return (
    <Menu
      theme="dark"
      mode="inline"
      selectedKeys={defaultItem}
      items={items}
      onClick={goTo}
    />
  );
};

export default MenuList;
